<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<script type="text/javascript" src="../js/jquery-3.0.0.js"></script>
		<link rel="stylesheet" type="text/css" href="../layui/css/layui.css" media="all" />

		<style type="text/css">
			.layui-table th,
			.layui-table td {
				text-align: center;
			}

			.layui-form {
				margin-top: 20px;
			}

			.cl_button {
				float: right;
				margin-right: 80px;
			}

			.search_btn {
				margin-left: -10px;
			}

			body {
				width: 100%;
				height: 100%;
			}

			#popUpdateTest {
				text-align: center;
			}

			.logo-title {
				text-align: left;
				letter-spacing: 2px;
				margin: 14px 20px;
			}

			.logo-title h1 {
				font-size: 25px;
				font-weight: bold;
			}

			.layui-form {
				background-color: #fff;
			}

			.layui-form .layui-form-item label {
				width: 100px;
			}

			.layui-form .layui-form-item input {
				line-height: 36px;
			}

			.add_btn {
				margin-top: 50px;
				text-align: center;
			}

            body .msgSkin .layui-layer-content {
                background-color: #FF5722;
                color: #fff;
                text-align: center;
            }
		</style>
	</head>
	<body>
		<form class="layui-form" action="" layui-filter="cl_form">
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">场景</label>
					<div class="layui-input-inline">
						<select name="modules" lay-verify="required" lay-search="" lay-filter="cl_select">
							<option value="1">全部线索</option>
							<option value="2">我负责的线索</option>
						</select>
					</div>
				</div>

				<div class="layui-inline" style="position: relative;width: 400px;">
					<div class="cl_search">
						<div class="layui-input-inline" id="search_box" style="width: 300px;">
							<i class="layui-btn layui-btn-xs layui-btn-primary layui-btn-radius layui-icon layui-icon-close layui-hide" id="inputClear"
							 style="position: absolute;float: right;right: 10px;top: 8px;"></i>
							<input class="layui-input" type="text" name="id" id="cl_input" autocomplete="off" placeholder="请输入线索名称" style="width: 300px;"/>
						</div>
						<div class="layui-btn search_btn" data-type="reload" id="search_btn" style="float: right;margin-right: 11px;">搜索 <i class="layui-icon">&#xe615;</i></div>
					</div>
				</div>

				<div class="layui-btn-group cl_button" id="cl_button">
					<button type="button" class="layui-btn" data-method="offset" data-type="auto" id="cl_create">新建线索<i class="layui-icon">&#xe654;</i></button>
					<button type="button" class="layui-btn layui-btn-danger" id="cl_del">批量删除<i class="layui-icon">&#xe640;</i></button>
				</div>
			</div>
		</form>


		<script src="../layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<table class="layui-hide" id="tb" lay-filter="cl_demo" style="margin-top: 50px;"></table>
		<!--<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs" lay-event="edit"  id="cl_edit"><i class="layui-icon">&#xe642;</i>编辑</a>
		    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon">&#xe608;</i>转为客户</a>
		</script>-->

		<script type="text/javascript">
			$(function() {
				layui.use(["laypage", "table", "form","laydate","layer"], function() {
					var laypage = layui.laypage;
					var page, limit;
					var $ = layui.jquery;
					var form = layui.form;
					var table = layui.table;
					var element = layui.element;
					var laydate = layui.laydate;
					var layer = layui.layer;
					var popForm = layui.form;

					//1.表格渲染
					table.render({
						elem: '#tb',
						url: '../clue/findAll',
						toolbar: '#toolbarDemo',
						defaultToolbar: ['filter', 'exports', 'print', {
							title: '提示',
							layEvent: 'LAYTABLE_TIPS',
							icon: 'layui-icon-tips'
						}],
						height: 750,
						title: '客户数据表',
						cols: [
							[
								{
									type: 'checkbox',
									fixed: 'left'
								}, {
									field: 'id',
									title: 'ID',
									width: 100,
									sort: true,
									fixed: true,
                                    hide:true
								}, {
									field: 'cl_name',
									title: '线索名称',
									width: 200,
                                    fixed: true
								}, {
									field: 'cl_source',
									title: '线索来源',
									width: 200
								}, {
									field: 'cl_phone',
									title: '手机',
									width: 200
								}, {
									field: 'cl_e_mail',
									title: '邮箱',
									width: 200
								}, {
									field: 'cl_industry',
									title: '客户行业',
									width: 200
								}, {
									field: 'cl_level',
									title: '客户级别',
									width: 200,
									sort: true,
									templet: function(data) {
										if (data.cl_level == 'A') {
											return 'A（重点客户）'
										} else if (data.cl_level == 'B') {
											return 'B（普通客户）'
										} else {
											return 'C（非优先客户）'
										}

									}
								}, {
									field: 'cl_principal',
									title: '负责人',
									width: 200,
									 templet:function (data) {
										 if (data.user.id==sessionStorage.getItem("userid")) {
											 return "本人"
										 }else {
											 return data.user.u_name
										 }
									}
								}, {
									field: 'cl_create_time',
									title: '创建时间',
									width: 200,
									sort: true,
									templet: function(data) {
										return data.cl_create_time
									}
								}, {
									field: 'cl_next_time',
									title: '下次联系时间',
									width: 200,
									sort: true,
									templet: function(data) {
										return data.cl_next_time
									}
								}, {
									field: 'cl_address',
									title: '地址',
									width: 200
								}, {
									field: 'cl_comment',
									title: '备注',
									width: 200
								}, {
									fixed: 'right',
									title: '操作',
									width: 200,
									align: 'center',
									//toolbar: '#barDemo'
								templet: function(data) {
									if(data.user.id==sessionStorage.getItem("userid")||sessionStorage.getItem("userid")=="1"){
										return '<a class="layui-btn layui-btn-xs" lay-event="edit"  id="cl_edit"><i class="layui-icon">&#xe642;</i>编辑</a>'+
												'<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon">&#xe608;</i>转为客户</a>'
									}else {
										return	'<a class="layui-btn layui-btn-xs layui-btn-disabled"><i class="layui-icon">&#xe642;</i>编辑</a>'+
												'<a class="layui-btn layui-btn-danger layui-btn-xs  layui-btn-disabled"><i class="layui-icon">&#xe608;</i>转为客户</a>'
									}
								}
								}
							]
						],
						/*data: [{
							"id": "1",
							"cl_name": "李四",
							"cl_source": "广告",
							"cl_phone": "15487965214",
							"cl_e_mail": "142548@qq.com",
							"cl_industry": "金融业",
							"cl_level": "A",
							"cl_principal": "张三",
							"cl_create_time": "2020-10-10",
							"cl_next_time": "2020-10-10",
							"cl_address": "zfsdfsdfsdffgdfgdf",
							"cl_comment": "不知道要写什么,就随便写了,随便写了........"
						}],*/
						page: true,
						id: 'testReload',
						parseData: function(res) {
							return {
								"code": res.code,
								"msg": res.msg,
								"count": res.count,
								"data": res.data
							}
						}
					});


					//2.监听表格复选框选择
					table.on('checkbox(cl_demo)', function(obj) {
						console.log(obj)
					});



					//3.监听表格操作
					table.on('tool(cl_demo)', function(obj) {
						var data = obj.data;
						var layEvent = obj.event;
						var tr = obj.tr;

						//转换成客户
						if (layEvent === 'del') {
							layer.confirm('真的要将ID为：' + data.id + "的线索转为客户吗?", function(index) {
								console.log(data.id);
								//向服务端发送转换指令
								$.ajax({
									type: "POST",
									dataType: "JSON",
									url: '../clue/clueToCustomer',
									data: {
										'id': data.id
									},
									success: function (result) {
										if (result.msg == "success") {
											layer.msg("转成客户成功", {
												icon: 1
											});
											obj.del();
											layer.close(index);
											console.log(index);
											table.reload('testReload', {
												page: {
													curr: 1
												}
											});
										};
									},
									error: function () {
										layer.msg("转成客户失败", {
											icon: 5
										});
									}

								})}

						)}else if (layEvent === 'edit') { //编辑
							console.log(data);
							console.log(data.user.u_name)
							layer.open({
								type: 1,
								title: "修改线索信息",
								shade: 0.8,
								area: ['800px', '70%'],
								shadeClose: false,
								content: $("#popUpdateTest")
							});
							setFormValue(obj, data);

						}
					});

					//监听弹出框表单提交，massage是修改界面的表单数据'submit(),是修改按钮的绑定
					function setFormValue(obj, data) {
						console.log(data);
						console.log(data.user.u_name)
						popForm.val("popupFormFilter", {
							id: data.id,
							cl_name: data.cl_name,
							cl_source: data.cl_source,
							cl_phone: data.cl_phone,
							cl_e_mail: data.cl_e_mail,
							cl_industry: data.cl_industry,
							cl_level: data.cl_level,
							cl_principal: data.user.id,
							cl_create_time: data.cl_create_time,
							cl_next_time: data.cl_next_time,
							cl_address: data.cl_address,
							cl_comment: data.cl_comment
						});
						
						
						form.on('submit(save)', function(massage) {
							console.log("message="+JSON.stringify(massage.field))
                            console.log(data.id)
                            var cl_id=data.id;
							$.ajax({
								url: '../clue/updateClue',
								type: 'POST',
								data: {
									id: cl_id,
									cl_name: massage.field.cl_name,
									cl_source: massage.field.cl_source,
									cl_phone: massage.field.cl_phone,
									cl_e_mail: massage.field.cl_e_mail,
									cl_industry: massage.field.cl_industry,
									cl_level: massage.field.cl_level,
									cl_principal: massage.field.cl_principal,
									cl_create_time: massage.field.cl_create_time,
									cl_next_time: massage.field.cl_next_time,
									cl_address: massage.field.cl_address,
									cl_comment: massage.field.cl_comment
								},
								success: function(result) {
									if (result.msg == 'success') {
										layer.msg("修改成功", {
											icon: 6
										});

										setTimeout(function() {
											obj.update({
												id: massage.field.id,
												cl_name: massage.field.cl_name,
												cl_source: massage.field.cl_source,
												cl_phone: massage.field.cl_phone,
												cl_e_mail: massage.field.cl_e_mail,
												cl_industry: massage.field.cl_industry,
												cl_level: massage.field.cl_level,
												cl_principal: massage.field.cl_principal,
												cl_create_time: massage.field.cl_create_time,
												cl_next_time: massage.field.cl_next_time,
												cl_address: massage.field.cl_address,
												cl_comment: massage.field.cl_comment
											});
											layer.closeAll();
										}, 1000);
									} else {
										layer.msg("修改失败", {
											icon: 5
										});
									}
								},
								error: function() {
									layer.msg('后台异常！未添加成功');
								}
							})
							return false;
						})
					}



					//4.下拉选择框的监听
					form.on('select(cl_select)', function(data) {
						console.log(data.value);
						var cl_userid = data.value;
						if (cl_userid == 1) {
							table.reload('testReload', {
								url: '../clue/findAll',
								page: {
									curr: 1
								}
							});
						} else {
							table.reload('testReload', {
								url: '../clue/findByUserid',
								where: {
									userid:sessionStorage.getItem("userid")

								},
								page: {
									curr: 1
								}
							});
						}

					});


					//5.创建客户弹出层
					$("#cl_create").click(function() {
						layer.open({
							type: 2,
							shadeClose: true,
							shade: 0.8,
							area: ['800px', '80%'],
							shadeClose: false,
							content: 'addClue.html',
						});
					});

					//6.删除所有客户
					$("#cl_del").click(function() {
						var checkStatus = table.checkStatus('testReload');
						var data = checkStatus.data;
						console.log("data=" + data)
						var ids = [];
						data.forEach(function(n, i) {
							ids.push(n.id);
						});
						console.log("ids="+ids)
						if (ids != '') {
							layer.confirm('确定删除所选项吗？', function(index) {
							console.log("ids===="+JSON.stringify(ids)+"=====")
								$.ajax({
									url: '../clue/deleteClue',
									type: 'POST',
                                    contentType : "application/json" ,
									dataType: 'JSON',
									data:JSON.stringify(ids),
									success: function(data) {
										if (data.code === 200) {
											layer.msg('删除成功');
											table.reload('testReload', {});
										} else {
											layer.msg('删除失败');
										}
									},
									error: function() {
										layer.msg('系统错误');
									}
								})
							})
						} else {
                            layer.msg('请选择需要删除的行',{skin:'msgSkin'});

						}
					});

					//7.搜索按钮
					$('#search_btn').click(function() {
						var inputVal = $('#cl_input').val();
						console.log(inputVal);
						if (inputVal == '' || inputVal == null) {
							table.reload('testReload', {
								url: '../clue/findAll',
								where: {
									cl_name: inputVal

								},
								page: {
									curr: 1
								}
							});
						} else {
							table.reload('testReload', {
								url: '../clue/findByName',

								where: {
									cl_name: inputVal

								},
								page: {
									curr: 1
								}
							});
						}
					});


					//键盘enter键
					$('.layui-input').keydown(function(e) {
						if (e.which == 13) {
							$("#search_btn").click();
						}
					});

					//8.清空输入框
					//显示清空按钮
					$('#search_box').mouseover(function() {
						var inputVal = $(cl_input).val();
						$('#inputClear').removeClass('layui-hide');
					})

					//不显示清空按钮
					$('#search_box').mouseout(function() {
						var inputVal = $(cl_input).val();
						$('#inputClear').addClass('layui-hide');
					})

					$('#inputClear').click(function() {
						var inputVal = $('#cl_input').val();
						if (inputVal != '' || inputVal != null) {
							console.log("清空输入框")
							$('#cl_input').val('');
						}
					})

					// 编辑客户=================================
					//1.下拉选择框的监听
					form.on('select(cl_principal)', function(data) {
						console.log(data.value);
					});

					//2.日期选择
					laydate.render({
						elem: '#cl_next_time',
						type: 'datetime',
						trigger: 'click',
						format: 'yyyy-MM-dd HH:mm:ss',
						min: minDate(),
						theme: '#393D49',
						done: function(value, date, endDate) {
							console.log(value);

						}
					});

					// 设置最小可选的日期
					function minDate() {
						var now = new Date();
						return now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate();
					}

					//3.取消并关闭页面
					$("#colseBtn").click(function(data) {
						console.log("关闭")
						layer.closeAll();
						return false;
					});

					//4.监听submit提交按钮 button
					form.on('submit(save)', function(data) {
						console.log("已提交")
						console.log(JSON.stringify(data.field))
						console.log($('#popupForm').serialize())
						$.ajax({
							type: "POST",
							dataType: "JSON",
							url: "../clue/saveClue",
							data: $('#popupForm').serialize(),
							success: function(result) {
								if (result.msg == "success") {
									layer.msg('添加成功，1秒后自动关闭该窗口');
									setTimeout(function() {
										var index = parent.layer.getFrameIndex(window.name);
										parent.layer.close(index);
										parent.layui.table.reload('testReload', {
											page: {
												curr: 1
											}
										});
									}, 1 * 1000);
								};
							},
							error: function() {
								layer.msg('后台异常！未添加成功');
							}
						});
						return false;
					});

					//5.页面打开时异步加载数据,查询负责人
					$.ajax({
						url: "../user/findAll?page=1&limit=10",
						async: false,
						type: "POST",
						datatype: "JSON",
						data: {},
						success: function(data) {
							if (data.data != "" && data.data != null) {
								var length = data.data.length;
								var html1 = '<dd lay-value="" class="layui-select-tips layui-this">直接选择</dd>';
								var html2 = '<option value="" >直接选择</option>';
								for (var i = 0; i < length; i++) {
									html1 += '<dd lay-value="' + data.data[i].id + '">' + data.data[i].u_name + '</dd>';
									html2 += '<option value="' + data.data[i].id + '">' + data.data[i].u_name + '</option>';
								}
								$("#cl_principal").next().children().eq(1).html(html1);
								$("#cl_principal").html(html2);

								$("#cl_principal").next().children().eq(1).html(html1);
								$("#cl_principal").html(html2);
								form.render(); //没有写这个，操作后没有效果

							}
						}
					});

					//6.自定义表单验证
					form.verify({
						user: function(value) {
							if (value.length < 2) {
								return '用户名至少得2个字符啊';
							}
						},
						pass: [
							/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'
						],
						content: function(value) {
							layedit.sync(editIndex);
						}
					});

				})
			})
		</script>

        <!-- 这里是弹出层的表单信息 -->
		<div class="layui-login-background" id="popUpdateTest" style="display:none;">
			<div class="layui-form layui-form">
				<form class="layui-form" action="" id="popupForm" lay-filter="popupFormFilter">
					<div class="layui-form-item logo-title">
						<h1>修改线索</h1>
						<div class="" style="">
							<div class="base_icon" style="width: 5px;height: 15px; background: #01AAED;display: inline-block;"></div>
							<h1 style="font-size:16px;margin-top: 10px;display: inline-block;">基本信息</h1>
						</div>
					</div>

					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label" for="cl_name"><span style="color: red;">*</span>线索名称</label>
							<div class="layui-input-inline">
								<input type="text" name="cl_name" id="cl_name" lay-verify="required" autocomplete="off" class="layui-input" disabled="disabled" style="color: #aaaaaa"/>
							</div>
						</div>

						<div class="layui-inline">
							<label class="layui-form-label" for="cl_source">线索来源</label>
							<div class="layui-input-inline">
								<select name="cl_source" id="cl_source" lay-verify="required">
									<option value=""></option>
									<option value="广告">广告</option>
									<option value="线上询价">线上询价</option>
									<option value="电话咨询">电话咨询</option>
									<option value="转介绍">转介绍</option>
									<option value="促销">促销</option>
								</select>
							</div>


						</div>

						<div class="layui-form-item">
							<div class="layui-inline">
								<label class="layui-form-label">手机</label>
								<div class="layui-input-inline">
									<input type="tel" name="cl_phone" id="cl_phone" lay-verify="required|phone" autocomplete="off" class="layui-input" />
								</div>
							</div>
							<div class="layui-inline">
								<label class="layui-form-label">邮箱</label>
								<div class="layui-input-inline">
									<input type="text" name="cl_e_mail" id="cl_e_mail" lay-verify="email" autocomplete="off" class="layui-input" />
								</div>
							</div>
						</div>

						<div class="layui-form-item">
							<div class="layui-inline">
								<label class="layui-form-label" for="cl_industry">客户行业</label>
								<div class="layui-input-inline">
									<select name="cl_industry" id="cl_industry" lay-verify="required">
										<option value=""></option>
										<option value="IT">IT</option>
										<option value="金融业">金融业</option>
										<option value="房地产">房地产</option>
										<option value="商业服务">商业服务</option>
										<option value="运输/物流">运输/物流</option>
										<option value="生产">生产</option>
										<option value="政府">政府</option>
										<option value="文化传媒">文化传媒</option>
									</select>
								</div>
							</div>
							<div class="layui-inline">
								<label class="layui-form-label" for="cl_level">客户级别</label>
								<div class="layui-input-inline">
									<select name="cl_level" id="cl_level" lay-verify="required">
										<option value=""></option>
										<option value="A">A（重点客户）</option>
										<option value="B">B（普通客户）</option>
										<option value="C">C（非优先客户）</option>
									</select>
								</div>
							</div>
						</div>

						<div class="layui-form-item">
							<div class="layui-inline">
								<label class="layui-form-label">下次联系时间</label>
								<div class="layui-input-inline">
									<input type="text" class="layui-input" name="cl_next_time" id="cl_next_time" autocomplete="off" placeholder="选择日期" />
								</div>
							</div>
							<div class="layui-inline">
								<label class="layui-form-label">备注</label>
								<div class="layui-input-inline">
									<textarea name="cl_comment" placeholder="请输入内容" class="layui-textarea" id="cl_comment"></textarea>
								</div>
							</div>
						</div>

						<div class="layui-form-item">
							<div class="layui-inline">
								<label class="layui-form-label">地址</label>
								<div class="layui-input-inline">
									<input type="text" name="cl_address" id="cl_address" lay-verify="required" autocomplete="off" class="layui-input"
									 placeholder="请输入地址" />
								</div>
							</div>
							<div class="layui-inline">
								<label class="layui-form-label" for="cl_principal">负责人</label>
								<div class="layui-input-inline">
									<select name="cl_principal" lay-verify="required" id="cl_principal" lay-search="" lay-filter="cl_principal"></select>
								</div>
							</div>
						</div>

						<div class="layui-form-item add_btn">
							<button type="reset" class="layui-btn layui-btn-primary" lay-filter="cancel" id="colseBtn">取消</button>
							<button class="layui-btn" lay-submit="save" lay-filter="save">保存编辑</button>
						</div>
					</div>
				</form>
			</div>
		</div>
		</div>
	</body>
</html>
